<template>
	<div class="footer">
		<div class="todo-count">共<strong>{{ lastLength }}</strong>条未完成任务 </div>
		<van-space>
			<van-button @click.prevent="updateStatus('all')" :class="{ selected: status === 'all' }">全部</van-button>
			<van-button @click.prevent="updateStatus('active')" :class="{ selected: status === 'active' }">待办</van-button>
			<van-button @click.prevent="updateStatus('completed')" :class="{ selected: status === 'completed' }">已完成
			</van-button>
		</van-space>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			lastLength: {
				type: Number
			},
			status: {
				type: String
			}
		},
		methods: {
			updateStatus(status) {
				this.$emit('updateStatus', status)
			}
		}
	}
</script>

<style>
	.footer {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		font-size: 15px;
	}

	.todo-count {
		flex: 1;
		text-align: left;
		font-size: 18px;
	}

	.selected {
		background-color: #e6e6e6;
	}
</style>